<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>炫酷计时</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="1000" height="400"></canvas>
</body>
<script>
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    //普通球
    function Ball(x, y) {
        this.x = x;
        this.y = y;
        this.color = "#237690";
    }
    Ball.prototype.r = 5;
    Ball.prototype.draw = function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        ctx.fill();
    }

    //彩球
    function ColorBall(x, y,color,speedX) {
        Ball.call(this, x, y);
        this.speedX = speedX;
        this.speedY=-10;
        this.color=color;
    }
    for (var x in Ball.prototype) {
        ColorBall.prototype[x] = Ball.prototype[x];

    }

    //数字
    function Num(x, y) {
        this.x = x;
        this.y = y;
        this.myArr=[];//存储当前显示的数字的内容
        this.num = 0; //通过num的值显示不同的小球布局
        this.isChange=false;//用来判定是否生成彩色球
    }
    Num.prototype.draw = function () {
        var arr = [];
        switch (this.num) {
        case 0:
            arr = [
						[2, 3, 4],
						[1, 2, 4, 5],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[1, 2, 4, 5],
						[2, 3, 4]
					];
            break;
        case 1:
            arr = [
						[3, 4],
						[1, 2, 3, 4],
						[3, 4],
						[3, 4],
						[3, 4],
						[3, 4],
						[3, 4],
						[3, 4],
						[3, 4],
						[0, 1, 2, 3, 4, 5, 6]
					];
            break;
        case 2:
            arr = [
						[1, 2, 3, 4, 5],
						[0, 1, 5, 6],
						[5, 6],
						[4, 5],
						[3, 4],
						[2, 3],
						[1, 2],
						[0, 1],
						[0, 1, 5, 6],
						[0, 1, 2, 3, 4, 5, 6]
					];
            break;
        case 3:
            arr = [
						[0, 1, 2, 3, 4, 5, 6],
						[5, 6],
						[4, 5],
						[3, 4],
						[2, 3, 4],
						[4, 5],
						[5, 6],
						[5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 4, 5]
					];
            break;
        case 4:
            arr = [
						[4, 5],
						[3, 4, 5],
						[2, 3, 4, 5],
						[1, 2, 4, 5],
						[0, 1, 4, 5],
						[0, 1, 2, 3, 4, 5, 6],
						[4, 5],
						[4, 5],
						[4, 5],
						[3, 4, 5, 6]
					];
            break;
        case 5:
            arr = [
						[0, 1, 2, 3, 4, 5, 6],
						[0, 1],
						[0, 1],
						[0, 1, 2, 3, 4, 5],
						[5, 6],
						[5, 6],
						[5, 6],
						[5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 4, 5]
					];
            break;
        case 6:
            arr = [
						[3, 4],
						[2, 3],
						[1, 2],
						[0, 1],
						[0, 1, 3, 4, 5],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 4, 5]
					];
            break;
        case 7:
            arr = [
						[0, 1, 2, 3, 4, 5, 6],
						[0, 1, 5, 6],
						[4, 5],
						[4, 5],
						[3, 4],
						[3, 4],
						[2, 3],
						[2, 3],
						[2, 3],
						[2, 3]
					];
            break;
        case 8:
            arr = [
						[1, 2, 3, 4, 5],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 4, 5],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 4, 5]
					];
            break;
        case 9:
            arr = [
						[1, 2, 3, 4, 5],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[0, 1, 5, 6],
						[1, 2, 3, 5, 6],
						[5, 6],
						[5, 6],
						[4, 5],
						[3, 4],
						[2, 3]
					];
            break;
        default:
            break;
        }

        for (var i = 0; i < arr.length; i++) {
            var array = arr[i];
            for (var j = 0; j < array.length; j++) {
                var bx = this.x + array[j] * 10 + 5;
                var by = this.y + i * 10 + 5;
                var ball = new Ball(bx, by);
                ball.draw();
            }
        }
        //绘制彩球
        if (!this.isChange){
            //不改变数字
            for (var i=0;i<arr.length;i++){
                this.myArr[i]=arr[i];
            }
        }else {
            //改变数字
            this.isChange=false;
            changeNum(this,this.myArr);
        }
    }
    
    function rand(min,max){
        return Math.floor(Math.random()*(max-min))+min;  
    }
    
    function randColor(){
        var r=rand(0,256);
        var g=rand(0,256);
        var b=rand(0,256);
        return "rgb("+r+","+g+","+b+")";
    }
    
    var cbs=[];//用来存放彩球
    
    
    function changeNum(obj,arr){
        for (var i = 0; i < arr.length; i++) {
            var array = arr[i];
            for (var j = 0; j < array.length; j++) {
                var bx = obj.x + array[j] * 10 + 5;
                var by = obj.y + i * 10 + 5;
                var s=rand(3,5);
                if (Math.random()-0.5<0){
                    s*=-1;
                }
                var ball = new ColorBall(bx, by,randColor(),s);
                cbs.push(ball);
                ball.draw();
            }
        }
    }
    
    var hb = new Num(200, 50);
    var hs = new Num(280, 50);
    var mb = new Num(400, 50);
    var ms = new Num(480, 50);
    var sb = new Num(600, 50);
    var ss = new Num(680, 50);

    //绘制数字
    function drawNum() {
        hb.draw();
        hs.draw();
        mb.draw();
        ms.draw();
        sb.draw();
        ss.draw();
    }
    
    var timer=setInterval(function(){
        ctx.clearRect(0,0,1000,400);
        var date=new Date();
        var HB=parseInt(date.getHours()/10);
        var HS=date.getHours()%10;
        var MB=parseInt(date.getMinutes()/10);
        var MS=date.getMinutes()%10;
        var SB=parseInt(date.getSeconds()/10);
        var SS=date.getSeconds()%10;
        
        //判断值是否一致
        hb.isChange=hb.num==HB?false:true;
        hs.isChange=hs.num==HS?false:true;
        mb.isChange=mb.num==MB?false:true;
        ms.isChange=ms.num==MS?false:true;
        sb.isChange=sb.num==SB?false:true;
        ss.isChange=ss.num==SS?false:true;
        
        hb.num=HB;
        hs.num=HS;
        ms.num=MS;
        sb.num=SB;
        ss.num=SS;
        
        drawNum();
        drawColorBall();//绘制彩球
        
    },30);
    
    //画彩球
    function drawColorBall(){
        for (var i=0;i<cbs.length;i++){
            var ball=cbs[i];
            ball.speedY++;
            ball.x+=ball.speedX;
            
            //计算y
            ball.y+=ball.speedY;
            if (ball.y>=395){
                ball.y=395;
                ball.speedY*=-0.9;
            }
            
            ball.draw();
            if (ball.x<=-5||ball.x>=1005){
                cbs.splice(i,1);
                i--;
            }
        }
    }
</script>

</html>